<template>
  <base-container :top="50" :bottom="40" >
    <template slot="top">
      <channel-nav />
    </template>
    <template slot="middle">
      <transition name="fade">
        <router-view></router-view>
      </transition>
    </template>
    <template slot="bottom">
      <channel-bottom />
    </template>
  </base-container>
</template>

<script>
import ChannelNav from '@/component/channel/channel-nav/channel-nav'
import BaseContainer from '@/component/base/base-container/base-container'
import ChannelBottom from '@/component/channel/channel-bottom/channel-bottom'

export default {
  name: 'channel',
  components: {
    ChannelNav,
    ChannelBottom,
    BaseContainer
  },
  data () {
    return {
    }
  },
  computed: {

  },
  created () {
  },
  mounted () {
  },
  methods: {
  }
}
</script>

<style lang="scss">
@import "~@/css/common/base";
@import "~@/css/common/reset";
@import "~@/css/lib/mixin";
@import "~@/css/lib/normalize";

.fade-enter-active, .fade-leave-active {
  transition-property: opacity;
  transition-duration: .15s;
}

.fade-enter-active {
  transition-delay: .15s;
}

.fade-enter, .fade-leave-active {
  opacity: 0
}

.room-height {
  height: 150px;
}

.manager-height {
  height: 200px;
}

.guest-height {
  height: 63%;
}
</style>
